/*
* @Author: syyao
* @Date: 2019-05-17 15:22:46
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-11 19:53:13
*/
<template>
    <div>
        <div class="top">
            <div class="top-cell">
                <Row style="height: 100%">
                    <i-col span="14" style="height: 100%">
                        <div
                            style="margin-left: 2.1vw;font-size: 1.2vw;text-align: left;color: #44519E;font-weight: bold;font-family: DengXian;"
                        >{{name}}</div>
                    </i-col>
                    <i-col span="10" style="height: 100%">
                      <Tooltip content="创建仓库" placement="bottom" transfer style="float: right;margin-top:0.2vw">
                        <Icon
                            color="#44519E"
                            size="20"
                            type="md-add"
                            v-on:click="showCreate"
                        />
                      </Tooltip>
                        <Modal
                            v-model="modal1"
                            title="创建个人仓库分类"
                            @on-ok="createPersonalHub"
                            @on-cancel="cancel"
                            width="20"
                        >
                            <Input
                                v-model="createHubName"
                                placeholder="请输入仓库类别名称"
                                style="width: 100%"
                            />
                        </Modal>
                    </i-col>
                </Row>
            </div>
        </div>
        <div
            class="middle"
            v-for="(list,index) in lists"
            :key="index"
            v-bind:class="{'choosen':list.id===choosenId}"
            v-on:click="changeHub(list.id)"
        >
            <div class="middle-cell">
                <div style="float: left;width: 100%;height: 2.5vw">
                    <Row style="height: 100%;line-height: 1vw">
                        <i-col span="6" style="height: 100%;text-align: left;">
                            <img
                                src="../assets/folder.png"
                                style="margin-left: 2.1vw;width: 2vw;margin-top: 0.2vw;"
                            >
                        </i-col>
                        <i-col span="13" style="height: 100%;text-align: left;margin-top: 0.3vw">
                            <div>
                                <p
                                    style="margin-left: 1vw;color: #44519E;font-size: 0.9vw;font-weight: bold;margin-top:0.45vw"
                                >{{list.personalHubname}}</p>
                            </div>
                            <!-- <div style="font-size: 0.625vw">
                                <span style="color: #1DACFF;">306</span>
                                <span>张图片</span>
                                <span style="color: #1DACFF;">2018-1-7</span>
                                <span>创建</span>
                            </div>-->
                        </i-col>
                        <i-col span="5">
                            <Dropdown :transfer="true">
                                <Icon
                                    style="margin-left:1vw;margin-top:0.5vw"
                                    type="ios-arrow-down"
                                ></Icon>
                                <DropdownMenu slot="list">
                                    <!-- <DropdownItem v-on:click="changeName(list.id)">修改名称</DropdownItem> -->
                                    <DropdownItem
                                        style="color:red"
                                        v-on:click.native="delate(list.id)"
                                    >删除本仓库</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </i-col>
                    </Row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import GetUserInfo from "../js/GetUserInfo";
export default {
  name: "SecondMune",
  props: {
    name: {
      type: String
    },
    list: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      createHubName: "",
      modal1: false,
      lists: {
        ...this.list
      },
      choosenId: ""
    };
  },
  created() {
    this.choosenId = this.$route.params.HubId;
  },
  watch: {
    "$route.params.HubId": function(newVal) {
      this.choosenId = newVal;
    },
    list: function(newVal) {
      this.lists = newVal;
    }
  },
  methods: {
    createPersonalHub() {
      let _this = this;
      let params = new URLSearchParams();
      params.append("PersonalHubName", this.createHubName);
      this.http.post(this, "/createPersonalHub", params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.$Message.success("创建成功");
          GetUserInfo.getUserInfo(_this);
        } else {
          _this.$Message.error("创建失败");
        }
      });
    },
    cancel() {
      this.modal1 = false;
    },
    showCreate() {
      this.modal1 = true;
    },
    changeHub(id) {
      this.$router.push({
        name: "HubId",
        params: {
          HubId: id
        }
      });
    },
    delate(id) {
      let _this = this;
      let params = new URLSearchParams();
      params.append("PersonalHubId", id);

      this.$Modal.confirm({
        title: "<p>请确认是否要删除仓库</p>",
        onOk: () => {
          this.http.post(this, "/deletePersonlHub", params).then(function(msg) {
            if (msg.data.code === "200") {
              _this.$Message.success("删除成功");
              GetUserInfo.getUserInfo(_this);
            } else {
              _this.$Message.error("删除失败");
            }
          });
        },
        onCancel: () => {}
      });
    }
  }
};
</script>

<style scoped>
.top {
  height: 5vw;
  border-bottom: #70707052 1px solid;
}

.top-cell {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
  width: 90%;
}

.top:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.middle {
  border-bottom: #70707052 1px solid;
  height: 5vw;
}

.middle-cell {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
  width: 100%;
}

.middle:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.middle:hover {
  background-color: #ffffff;
}

.choosen {
  background-color: #ffffff;
  border-left: 0.3vw solid #1dacff;
}
</style>